<template>
	<view class="content">
		<view class="logo">
			<view v-if="!logined" class="name-box">
				<image src="../../static/center/touxiang.png"></image>
				<navigator url="login" class="names">登录</navigator>
			</view>
			<view v-if="logined" class="name-box">
				<image :src="swichIcon()"></image>
				<view>
					<view class="names" @click="updateName(userinfo.usersName)">{{userinfo.usersName}}</view>
					<view @click="goJifenRecord()" style="padding: 16rpx 0 0 20rpx;">积分：<span id="jifen">{{userinfo.usersIntegral}}</span></view>
				</view>
			</view>
			<view class="name-box" @click="download()">
				<image src="../../static/center/xz.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="order-box">
			<view class="all-order">
				<view class="tips">商品订单</view>
				<view class="all-order2">
					<navigator url="orders/orders?index=0">查看全部订单</navigator>
					<image src="../../static/center/gd.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="order-types-box">
				<view class="types-item" @click="goOrders(1)">
					<image src="../../static/center/dfk2.png" mode="widthFix"></image>
					<view>待付款</view>
					<view class="badge" v-show="weifukuanNum>0">{{weifukuanNum}}</view>
				</view>
				<view class="types-item"  @click="goOrders(2)">
					<image src="../../static/center/dfh2.png" mode="widthFix"></image>
					<view>待发货</view>
					<view class="badge" v-show="weifahuoNum>0">{{weifahuoNum}}</view>
				</view>
				<view class="types-item"  @click="goOrders(3)">
					<image src="../../static/center/dsh2.png" mode="widthFix"></image>
					<view>待收货</view>
					<view class="badge" v-show="weishouhuoNum>0">{{weishouhuoNum}}</view>
				</view>
			</view>
		</view>
		<!-- 热品推荐 -->
		<view class="order-box">
			<view class="all-order">
				<view class="tips">推荐热品<image src="../../static/center/huo.png" mode="widthFix" class="huo"></image></view>
				<view class="all-order2">
					<navigator url="../index/index" open-type="switchTab">查看更多推荐</navigator>
					<image src="../../static/center/gd.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tui-box">
				<view class="tui-item" v-for="(item,i) in tuijianGoods" :key="item.gid" @click="goDetail(item.gid)">
					<image :src="switchImg(tuijianGoods,i)" mode="heightFix" class="img"></image>
					<view class="gname">{{item.gName}}</view>
					<view class="jiage">{{item.price}}</view>
				</view>
			</view>
		</view>
		<!-- 选项片 -->
		<view class="shouhuo-box">
			<view class="item" @click="shouHuo()">
				<view>
					<image src="../../static/center/wz.png" mode="widthFix" class="icons"></image>
					<text>收货地址</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="daifan()">
				<view>
					<image src="../../static/center/qb.png" mode="widthFix" class="icons"></image>
					<text>待返金额</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="gonggao()">
				<view>
					<image src="../../static/center/laba.png" mode="widthFix" class="icons"></image>
					<text>平台公告</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="xiaoxi()">
				<view>
					<image src="../../static/center/xxzx.png" mode="widthFix" class="icons"></image>
					<text>消息中心</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
			<view class="item" @click="loginOut()" v-if="logined">
				<view>
					<image src="../../static/center/zx.png" mode="widthFix" class="icons"></image>
					<text>用户注销</text>
				</view>
				<view>
					<image src="../../static/center/gd.png" mode="widthFix" class="gduo"></image>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" :mid-button="false" @change="tab"></u-tabbar>
	</view>
</template>

<script>
	import store from 'vuex'
	export default {
		data() {
			return {
				// 底部tab
				list:[
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/quanfan/fenlei/fenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/quanfan/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/center/index"
					},
				],
				current:0,
				logined:false,	// 是否登录
				userinfo:[],	// 用户信息
				tuijianGoods:[],// 推荐的商品
				weifukuanNum:0,
				weifahuoNum:0,
				weishouhuoNum:0
			}
		},
		onLoad() {
			this.checkUserInfo();
			uni.$on("checkUserInfo",this.checkUserInfo);
			this.getOrderByGroup();
			uni.$on("getOrderByGroup",this.getOrderByGroup);
		},
		methods: {
			//app下载
			download(){
				uni.navigateTo({
					url:'download?type=1'
				})
			},
			//查看积分记录
			goJifenRecord(){
				uni.navigateTo({
					url:'../../pages_jifen/center/jifenZhuanRang'
				})
			},
			//修改用户名
			updateName(usersName){
				uni.navigateTo({
					url:'../../pages_jifen/center/updateName?usersName='+usersName
				})
			},
			tab(e){
				this.current = e;
			},
			// 加载用户信息
			checkUserInfo(){
				this.$http.get('/xieliangoods', {
					p: 'findAllXieliangoods',
					paixu:2
				}).then(res => {
					this.tuijianGoods = [];
					if(res.data.list.length > 0){
						for(let xyz=0;xyz<4;xyz++){
							this.tuijianGoods = this.tuijianGoods.concat(res.data.list[xyz])
						}
					}
				});
				var usersId = uni.getStorageSync("usersId");
				if(usersId!=null && usersId!="" && usersId!=undefined){
					this.logined=true;
					this.userinfo=uni.getStorageSync("userinfo");
				}
			},
			// 跳转到订单列表页面
			goOrders(n){
				uni.navigateTo({
					url:'orders/orders?index='+n
				})
			},
			// 显示图片
			swichIcon(){
				if(this.isNull(this.userinfo.icon)){
					let xcxIcon = uni.getStorageSync('xcxIcon');
					if(this.isNull(xcxIcon)){
						return "../../static/center/touxiang.png";
					}
					return xcxIcon;
				}else{
					return this.host + this.userinfo.icon
				}
			},
			switchImg(obj,n){
				if(obj.length>0)
					return this.host+obj[n].gImages;
				else
					return '../../static/index/gm.png';
			},
			//跳转商品详情
			goDetail(gid){
				console.log("商品ID："+gid)
				uni.navigateTo({
					url:'../quanfan/GoodsDetail?gid='+gid
				})
			},
			// 跳转到收货地址
			shouHuo(){
				if(uni.getStorageSync('logined'))
					uni.navigateTo({
						url:'shouHuo?from=1'
					})
				else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'login'
						})
					},500)
				}
			},
			// 订单分组个数
			getOrderByGroup(){
				this.weifahuoNum=0;
				this.weifukuanNum=0;
				this.weishouhuoNum=0;
				let uid = uni.getStorageSync("usersId")	;
				// xielianorder.do/getorderfenzu?userid=8208
				this.$http.get('/xielianorder.do/getorderfenzu', {
					userid:uid
				}).then(res => {
					if(res.data.code==200){
						if(res.data.data.length>0){
							for(let i=0,len=res.data.data.length;i<len;i++){
								if(res.data.data[i].orStatus==0){
									this.weifukuanNum=res.data.data[i].geshu;
								}else if(res.data.data[i].orStatus==1){
									this.weifahuoNum=res.data.data[i].geshu;
								}else if(res.data.data[i].orStatus==2){
									this.weishouhuoNum = res.data.data[i].geshu;
								}
							}
						}
					}
				});
			},
			// 注销
			loginOut(){
				uni.showModal({
					title:'退出登录?',
					success:(res)=> {
						if(res.confirm){
							uni.removeStorageSync("usersId");
							uni.removeStorageSync("userinfo")	;
							uni.setStorageSync("logined",false);
							this.logined = false;
							this.$store.state.logined=false;
							this.$store.state.user=null;
							this.checkUserInfo();
							this.getOrderByGroup();
							uni.$emit("checkCart");				//携联商城购物车
							uni.$emit('getJifenCenter');		//积分商城个人中心
							uni.$emit('getJifenCat');			//积分商城购物车
							uni.$emit('init');					//品牌共享首页数据（商品价格）
							uni.$emit('getPinpaiOrderByGroup');	//品牌共享个人中心加载订单状态数量
							uni.$emit('checkPinpaiUserInfo');	//品牌共享个人中心加载用户数据
							uni.$emit('getXingyunUserInfo');	//幸运商城个人中心加载用户数据
						}else if(res.cancel){
							
						}
					}
				})
			},
			// 跳转到公告
			gonggao(){
				uni.navigateTo({
					url:'gonggao'
				})
			},
			// 跳转到待返记录
			daifan(){
				if(uni.getStorageSync('logined'))
					uni.navigateTo({
						url:'daifan'
					})
				else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'login'
						})
					},500)
				}
			},
			// 跳转到消息中心
			xiaoxi(){
				if(uni.getStorageSync('logined'))
					uni.navigateTo({
						url:'xiaoxi'
					})
				else{
					this.$u.toast("请先登录");
					setTimeout(() => {
						uni.navigateTo({
							url:'login'
						})
					},500)
				}
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style lang="scss" scoped>
	#jifen{
		padding: 2px 3px;
		background-color: red;
		color: white;
		border-radius: 4px;
	}
	.logo{
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		background-color: white;
		margin: 20rpx auto;
	}
	.logo .names{
		margin-left: 20rpx;
		color: #111111;
		font-weight: bold;
	}
	.logo .name-box{
		display: flex;
		align-items: center;
	}
	.logo image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	.order-box,.shouhuo-box{
		padding: 40rpx 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
	}
	.order-box .tips{
		font-size: 30rpx;
		font-weight: bold;
	}
	.order-box .all-order,.all-order2{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.order-box .all-order{
		padding-bottom:20rpx ;
		border-bottom: 1px solid #ccc;
	}
	.order-box .all-order navigator{
		color: red;
	}
	.order-box .all-order image{
		width: 10rpx;
		margin-left: 20rpx;
	}
	.order-types-box{
		display: flex;
		padding-top: 30rpx;
		justify-content: space-around;
	}
	.types-item image{
		width: 100rpx;
	}
	.types-item{
		position: relative;
	}
	.types-item .badge{
		position: absolute;
		top: 10rpx; 
		right: 0rpx;
		background-color: red;
		color: white;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
	}
	.order-box .all-order .huo{
		width: 30rpx;
		vertical-align: middle;
		position: relative;
		right: 20rpx;
	}
	.tui-box{
		display: flex;
		justify-content: space-around;
		padding-top: 20rpx;
	}
	.tui-box .gname{
		margin: 20rpx auto;
		font-size: 24rpx;
		overflow: hidden;
		color: #8f8f94;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tui-box .img{
		// width: 200rpx;
		height: 120rpx;
	}
	.tui-box .tui-item{
		width: 25%;
		text-align: center;
		padding: 10rpx;
	}
	.tui-box .jiage{
		background-color: red;
		color: #FFFFFF;
		border-radius: 40rpx;
		width: 80%;
		margin: auto;
		padding: 2px 0px;
		font-size: 22rpx;
		text-align: center;
	}
	.shouhuo-box>.item{
		display: flex;
		padding: 20rpx 20rpx;
		justify-content: space-between;
	}
	.shouhuo-box .icons{
		width: 30rpx;
		margin-right: 20rpx;
	}
	.shouhuo-box .gduo{
		width: 10rpx;
	}
</style>
